<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div @click="clickB">点击</div>
    <!-- 动态绑定movePbind -->
    <TestBind :title :desc v-bind="obj" :[movePbind]="moveP" />
    <PropsWatch :title />
    <DefineModel v-model="modelValue" :title="title" />
  </div>
</template>
<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import TestBind from './TestBind.vue'
import PropsWatch from './PropsWatch.vue'
import DefineModel from './DefineModel.vue'
const title = ref('nihao')
const desc = ref('desc')
const obj = ref({ name: 'obj', age: 18 })
const index = ref('a')
const moveP = ref(1)
const modelValue = defineModel<string>({ default: '默认的defineModel' })
const movePbind = computed(() => {
  return 'name' + index.value
})
const clickB = () => {
  moveP.value++
}

watch(modelValue, (newVal) => {
  console.log(newVal, '~~~~新的 modelValue')
})
</script>
<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
